<template>
	<div class="card-header-box11">
		<div class="titlezi flex mt20 mb20">
			<div class="flex-1">评审专家及联系电话</div>
		</div>

		<el-button v-if="isedit" type="primary" small @click="showAddDialog = true">新增</el-button>
		<el-table :data="zjtablelist" stripe class="mt20">
			<el-table-column label="序号" align="center" type="index" width="60">
				<template #default="{ $index }">
					{{ $index + 1 }}
				</template>
			</el-table-column>
			<el-table-column label="姓名" align="center" prop="expertName"> </el-table-column>
			<el-table-column label="职称" align="center" prop="expertTitle"> </el-table-column>
			<el-table-column label="工作单位" align="center" prop="expertCompany"> </el-table-column>
			<el-table-column label="联系电话" align="center" prop="expertTel"> </el-table-column>
			<el-table-column v-if="isedit" label="操作" fixed="right" header-align="center" align="center" width="100">
				<template #default="{ row, $index }">
					<el-icon :size="16" color="#1491FF" class="cursor" title="编辑" @click="goedit(row, $index)"> <Edit /></el-icon>
					<el-icon class="ml20 cursor" :size="16" color="#fe6360" title="删除" @click="removeli($index)"><Delete /></el-icon>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<Addtable v-model="showAddDialog" :datainfo="editinfo" @submit-success="setarry" @close-dialog="closeDrafterDialog" />
</template>
<script setup lang="ts">
import { ref, defineProps, watch, nextTick, onMounted } from 'vue'
import Addtable from './addtable.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const emit = defineEmits<{ (event: 'getlist', value: any): void }>()

const props = defineProps({
	datainfo: {
		type: Object,
		default: () => ({})
	},
	zjtablelist: {
		type: Array,
		default: () => []
	},
	isedit: {
		type: Boolean,
		default: false
	}
})
const datalist = ref([])
watch(
	() => props.zjtablelist,
	(newVal: any, oldVal: any) => {
		datalist.value = newVal
	},
	{ immediate: true }
)
const editinfo = ref({
	expertName: '',
	expertTitle: '',
	expertCompany: '',
	expertTel: '',
	index: -1,
	id: ''
})

const closeDrafterDialog = () => {
	editinfo.value = {
		expertName: '',
		expertTitle: '',
		expertCompany: '',
		expertTel: '',
		index: -1,
		id: ''
	}
}
const showAddDialog = ref(false)
onMounted(() => {})

const newadditem = () => {
	const list: any = {
		expertName: '',
		expertTitle: '',
		expertCompany: '',
		expertTel: ''
	}

	datalist.value.push(list)
	emit('getlist', datalist.value)
}
const setarry = (list: any) => {
	showAddDialog.value = false
	const index = list.index ?? -1
	if (index > -1) {
		datalist.value[index] = list
	} else {
		datalist.value.push({ ...list })
	}

	nextTick(() => {
		emit('getlist', datalist.value)
	})
}
const goedit = (e: Unit, i: number) => {
	showAddDialog.value = true
	e.index = i
	editinfo.value = e

	console.log(editinfo.value, 'sgsgsgsg')
}
const removeli = (index: any) => {
	ElMessageBox.confirm('确定要删除吗?', '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		datalist.value.splice(index, 1)
		emit('getlist', datalist.value)
	})

	const closeUnitDialog = () => {
		editinfo.value = {
			expertName: '',
			expertTitle: '',
			expertCompany: '',
			expertTel: '',
			index: -1
		}
	}
}
</script>

<style lang="scss" scoped>
.card-header-box11 {
	&::-webkit-scrollbar {
		display: none;
	}

	.titlezi {
		font-size: 16px;
		color: #333;
	}

	.kuaibj {
		background-color: #f5f6fa;
		padding: 20px;
		border-radius: 6px;
	}

	.fjsmzi {
		font-size: 12px;
		color: #606266;
		margin-left: 5px;
	}
}
</style>
